<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>



<!-- 为你推荐 -->
<div class="section section-margin" th:fragment="productList">
    <h1 style="text-align: center; font-weight: bold">为你推荐</h1>
    <br>
                <div class="container" style="text-align: center; font-size: 20px;font-weight: bold" >
                    <a href="#" style="margin:0 50px">精选</a>
                    <a href="#" style="margin:0 50px">智能先锋</a>
                    <a href="#" style="margin:0 50px">居家优品</a>
                    <a href="#" style="margin:0 50px">超市百货</a>
                    <a href="#" style="margin:0 50px">时尚达人</a>
                    <a href="#" style="margin:0 50px">进口好物</a>
                </div>
    <br>
    <div class="container">
        <div class="row flex-row-reverse">

            <div class="row shop_wrapper grid_3 ">
                <div style="text-align: center" th:each="product : ${product}" id="productDetail" class="col-lg-3 col-md-3 col-sm-6 product">
                    <div class="product-inner">
                        <div class="thumb">
                            <a th:href="@{'ywt-product?id='+${product.id}}" class="image">
                                <img style="height: 240px;width:220px" class="first-image" th:src="${product.pic}"
                                     alt="Product"/>
                            </a>
                        </div>
                        <div class="content">
                            <h5 class="title" style="
                                white-space:nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis">
                                <a style="
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis"
                                   th:href="@{'ywt-product?id='+${product.id}}"
                                   th:text="${product.name}"></a>
                            </h5>
                            <span class="price">
                                            <span class="new" th:text="'¥'+${product.price}"></span>
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Shop Wrapper End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/plugins.min.js"></script>

<!--Main JS-->
<script src="assets/js/main.js"></script>
</body>
<script>
    $("#productDetail").click(function (id) {
        $.ajax({
            type: "get",
            url: "",
            data: {
                "id": id,
            },
            success: function () {
            }
        })
    })
</script>
</html>